<!-- 随访用户 -->
<template>
	<globalModal title="团队成员" :visible="visible" :footer="null" @cancel="handleCancel">
		<!-- 查询区域 -->
		<a-form layout="inline">
			<!-- 固定条件 -->
			<a-form-item label="姓名">
				<a-input v-model="filter.nickName" style="width: 200px" placeholder="请输入昵称" />
			</a-form-item>
			<a-form-item label="联系方式"
				><a-input v-model="filter.phone" style="width: 200px" placeholder="请输入联系方式"
			/></a-form-item>
			<!-- 按钮 -->
			<a-space class="table-page-search-submitButtons">
				<a-button type="primary" @click="searchQuery"> 搜索 </a-button>
				<a-button class="ant-btn-yellow" @click="searchReset">清除</a-button>
			</a-space>
		</a-form>
		<div style="margin: 10px 0"><a-button type="primary" @click="add"> 新增 </a-button></div>
		<s-table
			bordered
			:columns="columns"
			:data="loadListData"
			rowKey="domesticAnimalsId"
			ref="table"
			:scroll="{ x: 650, y: 260 }"
			size="small"
			:isFirstLoad="false"
			:showPagination="false"
		></s-table>
		<!-- <add-account-modal ref="addModal" @ok="searchQuery"></add-account-modal> -->
	</globalModal>
</template>

<script>
import { sysManageapi, doctorManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
const columns = [
	{
		title: '姓名',
		dataIndex: 'nickName',
		key: 'nickName',
	},
	{
		title: '年龄',
		dataIndex: 'age',
		key: 'age',
		ellipsis: true,
	},
	{
		title: '性别',
		dataIndex: 'gender',
		key: 'gender',
		ellipsis: true,
	},
	{
		title: '联系方式',
		dataIndex: 'phone',
		key: 'phone',
		ellipsis: true,
	},
];
export default {
	name: 'addOrEditDeviceTypeModal',
	mixins: [ModalMixins],
	components: {},
	data() {
		return {
			columns,
			visible: false,
			doctorId: '',
			filter: {},
		};
	},
	created() {},
	methods: {
		show(doctorId) {
			this.visible = true;
			this.doctorId = doctorId;
			this.$nextTick(() => {
				this.$refs.table.refresh();
			});
		},
		searchQuery() {
			this.$refs.table.refresh();
		},
		searchReset() {
			this.filter = {};
			this.$refs.table.refresh();
		},
		handleCancel() {
			this.$emit('close');
			this.visible = false;
		},
		loadListData(parameter) {
			let params = Object.assign({}, { doctorId: this.doctorId }, this.filter);
			return this.$postAction(doctorManageapi.doctorUrl.findAllotPatients, params).then((res) => {
				this.list = res.data;
				return res.data;
			});
		},
		add() {
			this.$refs.addModal.show(this.doctorId);
		},
	},
};
</script>

<style lang="less" scoped>
/deep/.table-page-search-submitButtons {
	margin-top: 4px;

	.ant-btn-blue {
		color: #fff;
		background-color: #3b74f8;
		border-color: #3b74f8;
	}

	.ant-btn-yellow {
		color: #fff;
		background-color: rgb(248, 191, 59);
		border-color: rgb(248, 191, 59);
	}
}
/deep/ .table-wrapper .operation {
	line-height: 1;

	a {
		&.del {
			color: #d43030;
		}
		&.edit {
			color: #0a8783;
		}
	}
	a + a {
		margin-left: 12px;
	}
}
/deep/.ant-form {
	.ant-form-item {
		margin-bottom: 0;
	}
}
</style>
